<template>
  <div class="contend" @mouseenter="showFullScreen" @mouseleave="hidFullScreen">
    <!-- 大屏头部 -->
    <div class="head">
      <div class="headleft">
        <button
          class="full-screen el-icon-full-screen"
          @click="fullScreen"
          v-show="isShow"
          title="全屏显示"
        ></button>
      </div>
      <div class="title">招生部数据展示</div>
      <div class="headright">
        <div class="nowDate">{{ nowDate }}</div>
        <div class="nowHour">{{ nowTime }}</div>
        <div class="weather">
          <span>今日天气</span>
          <!-- <span style="float:left; margin-left:19px;">今日天气</span>
              <i class="el-icon-sunrise"></i>
              <span class="fs">晴</span>
          <span class="fs">32°C</span>-->

          <!-- 天气插件 -->
          <iframe
            width="194"
            scrolling="no"
            height="50"
            frameborder="0"
            allowtransparency="true"
            src="https://i.tianqi.com?c=code&id=154&color=%23FFFFFF&icon=4&site=16"
          ></iframe>
        </div>
      </div>
      <!-- 大屏主体内容区域 -->
      <div class="main_content">
        <div class="block monthBox">
          <!-- <span class="demonstration">月</span> -->
          <el-date-picker
            v-model="value2"
            type="month"
            placeholder="选择月份"
            @change="changeMonth($event)"
          >
          </el-date-picker>
        </div>
        <!-- 左侧内容区域 -->
        <div class="main_left">
          <div class="todayDate">
            <div class="todayDate_title">
              <img src="../../../../static/img/big/2.png" alt />
              今日数据
            </div>
            <div class="dateImg">
              <div class="dateImg1">
                <div>回款金额</div>
                <img src="../../../../static/img/big/today2.png" alt />
                <div class="dateNum">{{ receivablesMoney || 0 }}</div>
              </div>
              <div class="dateImg2">
                <div>签单总数</div>
                <img src="../../../../static/img/big/today2.png" alt />
                <div class="dateNum">{{ contractCount || 0 }}</div>
              </div>
              <div class="dateImg3">
                <div>学员总数</div>
                <img src="../../../../static/img/big/today2.png" alt />
                <div class="dateNum">{{ customerCount || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="swiper-container mySwiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide courseStar">
                <div class="starLeft">
                  <div class="starTitle">
                    <img src="../../../../static/img/big/1.png" alt />
                    课程营销明星
                  </div>
                  <div class="todaypic" v-if="!marketingTeacher1">
                    <p>暂无</p>
                  </div>
                  <div class="todaypic" v-else>
                    <p v-if="!marketingTeacher1.userVO.img">
                      {{ marketingTeacher1.userVO.realname | valueFilter }}
                    </p>
                    <img
                      :src="MarketImgData"
                      alt=""
                      v-if="marketingTeacher1.userVO.img"
                    />
                  </div>

                  <div class="firstPer">
                    第一名：{{
                      marketingTeacher1
                        ? marketingTeacher1.userVO.realname
                        : "暂无"
                    }}
                  </div>
                </div>
                <div class="startDateTable">
                  <div class="startDate" style="background-size: 100% 100%">
                    <div class="classNumP">
                      <img src="../../../../static/img/big/qishu.png" alt />
                    </div>
                    <div class="classNumT">课程期数</div>
                    <div class="classNum">
                      {{ marketingTeacher1 ? marketingTeacher1.periods : 0 }}
                    </div>
                  </div>
                  <div class="startDate" style="background-size: 100% 100%">
                    <div class="classNumP">
                      <img
                        src="../../../../static/img/big/zhuanhualv.png"
                        alt
                      />
                    </div>
                    <div class="classNumT">转化率</div>
                    <div class="classNum">
                      {{
                        marketingTeacher1 ? marketingTeacher1.transferRate : 0
                      }}%
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide courseStar">
                <div class="starLeft">
                  <div class="starTitle">
                    <img src="../../../../static/img/big/1.png" alt />
                    课程营销明星
                  </div>
                  <div class="todaypic" v-if="!marketingTeacher2">
                    <p>暂无</p>
                  </div>
                  <div class="todaypic" v-else>
                    <p v-if="!marketingTeacher2.userVO.img">
                      {{ marketingTeacher2.userVO.realname | valueFilter }}
                    </p>
                    <img
                      :src="MarketImgData"
                      alt=""
                      v-if="marketingTeacher2.userVO.img"
                    />
                  </div>

                  <div class="firstPer">
                    第二名：{{
                      marketingTeacher2
                        ? marketingTeacher2.userVO.realname
                        : "暂无"
                    }}
                  </div>
                </div>
                <div class="startDateTable">
                  <div class="startDate" style="background-size: 100% 100%">
                    <div class="classNumP">
                      <img src="../../../../static/img/big/qishu.png" alt />
                    </div>
                    <div class="classNumT">课程期数</div>
                    <div class="classNum">
                      {{ marketingTeacher2 ? marketingTeacher2.periods : 0 }}
                    </div>
                  </div>
                  <div class="startDate" style="background-size: 100% 100%">
                    <div class="classNumP">
                      <img
                        src="../../../../static/img/big/zhuanhualv.png"
                        alt
                      />
                    </div>
                    <div class="classNumT">转化率</div>
                    <div class="classNum">
                      {{
                        marketingTeacher2 ? marketingTeacher2.transferRate : 0
                      }}%
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide courseStar">
                <div class="starLeft">
                  <div class="starTitle">
                    <img src="../../../../static/img/big/1.png" alt />
                    课程营销明星
                  </div>
                  <div class="todaypic" v-if="!marketingTeacher3">
                    <p>暂无</p>
                  </div>
                  <div class="todaypic" v-else>
                    <p v-if="!marketingTeacher3.userVO.img">
                      {{ marketingTeacher3.userVO.realname | valueFilter }}
                    </p>
                    <img
                      :src="MarketImgData"
                      alt=""
                      v-if="marketingTeacher3.userVO.img"
                    />
                  </div>

                  <div class="firstPer">
                    第三名：{{
                      marketingTeacher3
                        ? marketingTeacher3.userVO.realname
                        : "暂无"
                    }}
                  </div>
                </div>
                <div class="startDateTable">
                  <div class="startDate" style="background-size: 100% 100%">
                    <div class="classNumP">
                      <img src="../../../../static/img/big/qishu.png" alt />
                    </div>
                    <div class="classNumT">课程期数</div>
                    <div class="classNum">
                      {{ marketingTeacher3 ? marketingTeacher3.periods : 0 }}
                    </div>
                  </div>
                  <div class="startDate" style="background-size: 100% 100%">
                    <div class="classNumP">
                      <img
                        src="../../../../static/img/big/zhuanhualv.png"
                        alt
                      />
                    </div>
                    <div class="classNumT">转化率</div>
                    <div class="classNum">
                      {{
                        marketingTeacher3 ? marketingTeacher3.transferRate : 0
                      }}%
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="courseStar"></div> -->

          <div class="conpanyRank">
            <div class="rankTiele">
              <img
                src="../../../../static/img/big/gongsipaihang.png"
                alt
              />公司排行榜
            </div>
            <div class="conpanyTop">
              <ul>
                <li>排名</li>
                <li class="RankName">姓名</li>
                <li class="RankTeam">小组</li>
                <li class="RankSigNum">签单数量</li>
                <li class="RankBackMoe">回款金额</li>
              </ul>
            </div>
            <div class="flexrow" id="companyRank" v-if="rankingList.length > 0">
              <vue-seamless-scroll
                :data="rankingList"
                class="seamless-warp"
                :class-option="classOption"
              >
                <ul class="list_ul1">
                  <li
                    class="flexrow list_li"
                    v-for="(item, index) in rankingList"
                    :key="index"
                    :style="item.style"
                  >
                    <span v-if="index > 2">{{ item.order }}</span>
                    <span v-if="index == 0">
                      <img src="\static\img\big\no1.png" alt />
                    </span>
                    <span v-if="index == 1">
                      <img src="\static\img\big\no2.png" alt />
                    </span>
                    <span v-if="index == 2">
                      <img src="\static\img\big\no3.png" alt />
                    </span>
                    <span class="RankName">{{ item.realname }}</span>
                    <span class="RankTeam">{{ item.name }}</span>
                    <span class="RankSigNum">{{ item.num || 0 }}</span>
                    <span class="RankBackMoe" id="yellow">
                      {{ item.money || 0 }}
                    </span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
            <div class="list_null list_null2" v-if="rankingList.length <= 0">
              暂无数据
            </div>
          </div>
        </div>
        <!-- 中间内容区域 -->
        <div class="main_middle">
          <div class="topStar">
            <div class="switch">
              <el-button-group class="switchButton">
                <el-button type="primary" size="mini" @click="showRank"
                  >排行榜</el-button
                >
                <el-button type="primary" size="mini" @click="showVideo"
                  >视频</el-button
                >
              </el-button-group>
            </div>
            <div
              class="swiper-container mySwiper1"
              v-show="isShowSwiper"
            >
              <div class="swiper-wrapper">
                <!-- 进步榜 -->
                <div class="swiper-slide jb">
                  <div class="Top3Tiele">进步榜</div>
                  <div class="top1mes">
                    <div class="topnum">第一名</div>
                    <div class="topname">
                      {{ xiaoguanList.first.realname2 }}
                    </div>
                    <div class="lastMon">
                      较上月增加：{{ xiaoguanList.first.count }}单
                    </div>
                  </div>
                  <div class="Top1-Area">
                    <div class="topImg">
                      <p v-if="!xiaoguanList.firstImg2">
                        {{ xiaoguanList.first.realname2 | valueFilter }}
                      </p>
                      <img :src="xiaoguanList.firstImg2" alt="" v-else />
                    </div>
                  </div>
                  <div class="top2mes">
                    <div class="topnum">第二名</div>
                    <div class="topname">
                      {{ this.xiaoguanList.second.realname2 }}
                    </div>
                    <div class="lastMon">
                      较上月增加：{{ xiaoguanList.second.count }}单
                    </div>
                  </div>
                  <div class="Top2-Area">
                    <div class="topImg">
                      <p v-if="!xiaoguanList.secondImg2">
                        {{ xiaoguanList.second.realname2 | valueFilter }}
                      </p>
                      <img :src="xiaoguanList.secondImg2" alt="" v-else />
                    </div>
                  </div>
                  <div class="top3mes">
                    <div class="topnum">第三名</div>
                    <div class="topname">
                      {{ this.xiaoguanList.third.realname2 }}
                    </div>
                    <div class="lastMon">
                      较上月增加：{{ xiaoguanList.third.count }}单
                    </div>
                  </div>
                  <div class="Top3-Area">
                    <div class="topImg">
                      <p v-if="!xiaoguanList.thirdImg2">
                        {{ xiaoguanList.third.realname2 | valueFilter }}
                      </p>
                      <img :src="xiaoguanList.thirdImg2" alt="" v-else />
                    </div>
                  </div>
                </div>
                <div class="swiper-slide xg">
                  <div class="Top3Tiele">销冠榜</div>
                  <div class="top1mes">
                    <div class="topnum">第一名</div>
                    <div class="topname">{{ xiaoguanList.first.realname }}</div>
                    <div class="lastMon">
                      回款金额：{{ xiaoguanList.first.receivedMoney }}
                    </div>
                  </div>
                  <div class="Top1-Area">
                    <div class="topImg">
                      <p v-if="!xiaoguanList.firstImg">
                        {{ xiaoguanList.first.realname | valueFilter }}
                      </p>
                      <img :src="xiaoguanList.firstImg" alt="" v-else />
                    </div>
                  </div>
                  <div class="top2mes">
                    <div class="topnum">第二名</div>
                    <div class="topname">
                      {{ xiaoguanList.second.realname }}
                    </div>
                    <div class="lastMon">
                      回款金额：{{ xiaoguanList.second.receivedMoney }}
                    </div>
                  </div>
                  <div class="Top2-Area">
                    <div class="topImg">
                      <p class="p2" v-if="!xiaoguanList.secondImg">
                        {{ xiaoguanList.second.realname | valueFilter }}
                      </p>
                      <img :src="xiaoguanList.secondImg" alt="" v-else />
                    </div>
                  </div>
                  <div class="top3mes">
                    <div class="topnum">第三名</div>
                    <div class="topname">{{ xiaoguanList.third.realname }}</div>
                    <div class="lastMon">
                      回款金额：{{ xiaoguanList.third.receivedMoney }}
                    </div>
                  </div>
                  <div class="Top3-Area">
                    <div class="topImg">
                      <p class="p2" v-if="!xiaoguanList.thirdImg">
                        {{ xiaoguanList.third.realname | valueFilter }}
                      </p>
                      <img :src="xiaoguanList.thirdImg" alt="" v-else />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 视频 -->
            <div class="video" v-show="isShowVideo">
              <div class="videoT">
                <img
                  src="../../../../static/img/big/shipinLogo.png"
                  alt
                />我听冠军说
              </div>
              <div class="videoArea">
                <video :src="videoData" controls loop></video>
              </div>
              <div class="sumSig">累计签单:{{ numberone.num }}单</div>
              <div class="firstN">
                第一名:{{ numberone.name | numName }}{{ numberone.realname }}
              </div>
              <div class="backM">回款金额:{{ numberone.money }}</div>
            </div>
          </div>
          <!-- 线型图 -->
          <div class="LineMain">
            <div class="LineT">
              <img src="../../../../static/img/big/2.png" alt />历史数据分析
            </div>
            <div id="lineArea" ref="lineArea"></div>
          </div>
          <canvas id="canvas" v-show="isCanvas"></canvas>
        </div>

        <!-- 右侧内容区域 -->
        <div class="main_right">
          <div class="signStar">
            <div class="signRank_title">
              <img src="../../../../static/img/big/gongsipaihang.png" alt />
              签单排行榜
            </div>
            <div class="firstSign">
              <div class="left">
                <div class="firstImg" v-if="!signBillRanking">
                  <p>暂无</p>
                </div>
                <div class="firstImg" v-else>
                  <p v-if="!signBillRanking.userVO.img">
                    {{ signBillRanking.userVO.realname | valueFilter }}
                  </p>
                  <img :src="signBillImgData" alt="" v-else />
                </div>
                <div class="signstar">首签明星</div>
                <div class="firstName">
                  {{
                    signBillRanking ? signBillRanking.userVO.realname : "暂无"
                  }}
                </div>
              </div>
              <div class="right">
                <div class="topdate">
                  {{
                    signBillRanking ? signBillRanking.userVO.deptName : "暂无"
                  }}
                </div>
                <div class="bottomdate">
                  <div class="singDate">
                    <div class="singIm">
                      <img src="../../../../static/img/big/riqiandan.png" alt />
                    </div>
                    <div class="singT">今日签单</div>
                    <div class="singNum">
                      {{ signBillRanking ? signBillRanking.todayContract : 0 }}
                    </div>
                  </div>
                  <div class="singDate">
                    <div class="singIm">
                      <img
                        src="../../../../static/img/big/yueqiandan.png"
                        alt
                      />
                    </div>
                    <div class="singT">本月签单</div>
                    <div class="singNum">
                      {{ signBillRanking ? signBillRanking.monthContract : 0 }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="signRank qiandan">
            <div class="qiandanTop">
              <ul>
                <li>排名</li>
                <li class="RankName">姓名</li>
                <li class="RankTeam">小组</li>
                <li class="RankSigNum">签单数量</li>
                <li class="RankBackMoe">回款金额</li>
              </ul>
            </div>
            <div class="qiandanFlex">
              <div class="qiandanFlex_list">
                <p v-if="qiandanList.length > 0">
                  <img src="\static\img\big\no1.png" alt />
                </p>
                <p v-if="qiandanList.length > 1">
                  <img src="\static\img\big\no2.png" alt />
                </p>
                <p v-if="qiandanList.length > 2">
                  <img src="\static\img\big\no3.png" alt />
                </p>
                <p v-if="qiandanList.length > 3">4</p>
                <p v-if="qiandanList.length > 4">5</p>
              </div>
              <ul class="list_ul1 list_ul2 qiandanUl">
                <li
                  class="flexrow list_li"
                  v-for="(item, index) in qiandanList"
                  :key="index"
                  :style="item.style"
                >
                  <span class="RankName">{{ item.realname }}</span>
                  <span class="RankTeam">{{ item.name }}</span>
                  <span class="RankSigNum">{{ item.num || 0 }}</span>
                  <span class="RankBackMoe" id="yellow">{{
                    item.money || 0
                  }}</span>
                </li>
              </ul>
              <div class="list_null" v-if="qiandanList.length <= 0">
                暂无数据
              </div>
            </div>
          </div>
          <div class="teamRank">
            <div class="teamRankTiele">
              <img
                src="../../../../static/img/big/gongsipaihang.png"
                alt
              />战队排行榜
              <el-button-group class="rankBtn">
                <el-button type="primary" size="mini" @click="showTmoe"
                  >回款金额</el-button
                >
                <el-button type="primary" size="mini" @click="showTAve"
                  >人均回款</el-button
                >
              </el-button-group>
            </div>
            <div class="rankTable">
              <div class="qiandanTop">
                <ul>
                  <li>排名</li>
                  <li class="RankName">负责人</li>
                  <li class="RankTeam">小组</li>
                  <li class="RankSigNum">组内人数</li>
                  <li class="RankSigNum">签单数量</li>
                  <li class="RankBackMoe">
                    {{ isShowTMone ? "回款金额" : "平均回款" }}
                  </li>
                </ul>
              </div>
              <div class="qiandanFlex">
                <div class="qiandanFlex_list" v-if="isShowTMone">
                  <p v-if="teamList.length > 0">
                    <img src="\static\img\big\no1.png" alt />
                  </p>
                  <p v-if="teamList.length > 1">
                    <img src="\static\img\big\no2.png" alt />
                  </p>
                  <p v-if="teamList.length > 2">
                    <img src="\static\img\big\no3.png" alt />
                  </p>
                  <p v-if="teamList.length > 3">4</p>
                  <p v-if="teamList.length > 4">5</p>
                  <p v-if="teamList.length > 5">6</p>
                  <p v-if="teamList.length > 6">7</p>
                </div>
                <div class="qiandanFlex_list" v-else>
                  <p v-if="teamOneList.length > 0">
                    <img src="\static\img\big\no1.png" alt />
                  </p>
                  <p v-if="teamOneList.length > 1">
                    <img src="\static\img\big\no2.png" alt />
                  </p>
                  <p v-if="teamOneList.length > 2">
                    <img src="\static\img\big\no3.png" alt />
                  </p>
                  <p v-if="teamOneList.length > 3">4</p>
                  <p v-if="teamOneList.length > 4">5</p>
                  <p v-if="teamOneList.length > 5">6</p>
                  <p v-if="teamOneList.length > 6">7</p>
                </div>
                <ul class="list_ul1 list_ul2" v-if="isShowTMone">
                  <li
                    class="flexrow list_li"
                    v-for="(item, index) in teamList"
                    :key="index"
                    :style="item.style"
                  >
                    <span class="RankName">{{ item.realname }}</span>
                    <span class="RankTeam">{{ item.name }}</span>
                    <span class="RankName">{{ item.peopleNum || 0 }}</span>
                    <span class="RankSigNum">{{ item.num || 0 }}</span>
                    <span class="RankBackMoe" id="yellow">
                      {{ item.money || 0 }}</span
                    >
                  </li>
                </ul>
                <ul class="list_ul1 list_ul2" v-else>
                  <li
                    class="flexrow list_li"
                    v-for="(item, index) in teamOneList"
                    :key="index"
                    :style="item.style"
                  >
                    <span class="RankName">{{ item.realname }}</span>
                    <span class="RankTeam">{{ item.name }}</span>
                    <span class="RankName">{{ item.peopleNum || 0 }}</span>
                    <span class="RankSigNum">{{ item.num || 0 }}</span>
                    <span class="RankBackMoe" id="yellow">
                      {{ item.money || 0 }}</span
                    >
                  </li>
                </ul>
                <div
                  class="list_null"
                  v-if="teamList.length <= 0 || teamOneList.length <= 0"
                >
                  暂无数据
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <audio src="/static/bigJs/flower.mp3" id="playaudio">
      您的浏览器不支持 audio 标签。
    </audio>
  </div>
</template>
<script>
import axios from "axios";
//导入echarts图表
import echarts from "echarts";
import screenfull from "screenfull";
import Swiper from "swiper";
// import WkBackgroudTabsVue from "../../admin/examine/components/WkBackgroudTabs.vue";
import vueSeamlessScroll from "vue-seamless-scroll"; //滚动组件
import {
  teamListAPI,
  topThreeAndDiscountAPI,
  rankingListAPI,
  todayLargeScreenDataAPI,
  courseStarAPI,
  queryMp4,
} from "@/api/bi/customer";
import { wkPreviewFile } from "@/utils";
import { Result } from "element-ui";
//烟花
// const s = document.createElement("script");
// s.type = "text/javascript";
// s.src = "/static/bigJs/canvas.js";
// document.body.appendChild(s);
// const d = document.createElement("script");
// d.type = "text/javascript";
// d.src = "/static/bigJs/deepCopy.js";
// document.body.appendChild(d);
// const b = document.createElement("script");
// b.type = "text/javascript";
// b.src = "/static/bigJs/Firework.js";
// document.body.appendChild(b);

//flexible响应式布局
(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

export default {
  components: {
    //滚动组件
    vueSeamlessScroll,
  },
  data() {
    return {
      value2: "",
      nowDate: "",
      nowTime: "", // 当前日期
      fullscreen: false,
      isShow: false,
      isShowVideo: false,
      isShowSwiper: true,
      isShowTMone: true,
      isShowAve: false,
      isCanvas: true,

      qiandanList: [], //签单排行榜
      teamList: [], //战队排行榜 回款金额
      teamOneList: [], //战队排行榜 平均回款
      rankingList: [], //公司排行榜

      zhexianList1: [], //折线1 上个月数据
      zhexianList2: [], //折线2 上上个月数据
      xList: [], //x轴
      xiaoguanList: {
        //销冠榜和进步榜
        first: {},
        second: {},
        third: {},
        firstImg: "",
        secondImg: "",
        thirdImg: "",
        firstImg2: "",
        secondImg2: "",
        thirdImg2: "",
      },
      receivablesMoney: "", //回款金额
      contractCount: "", //签单总数
      customerCount: "", //学员总数
      marketingTeacher1: {
        transferRate: "0",
        transferCount: "0",
        leadsCount: "0",
        periods: "0",
        userVO: {
          realname: "暂无",
          img: "",
        },
      }, //课程营销明星
      marketingTeacher2: {
        transferRate: "0",
        transferCount: "0",
        leadsCount: "0",
        periods: "0",
        userVO: {
          realname: "暂无",
          img: "",
        },
      },
      marketingTeacher3: {
        transferRate: "0",
        transferCount: "0",
        leadsCount: "0",
        periods: "0",
        userVO: {
          realname: "暂无",
          img: "",
        },
      },

      signBillRanking: {
        todayContract: "0",
        monthContract: "0",
        userVO: {
          realname: "暂无",
          img: "",
        },
      }, //首签明星

      //视频
      queryMp4data: {},
      videoData: "",
      urlVideo: "",

      // 课程营销头像
      MarketImgData: "",
      //首签明星头像
      signBillImgData: "",

      //定时器
      myInterval: "",
      myInterval2: "",

      // 是否全屏
      isScreenFull: false,

      //选择月份
      date: "",
      //年份
      year: "",
      //视频信息
      numberone: [],
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.getQueryMp4(); //视频
    this.getlist(); //折线图
    this.getCourseStar(); //课程营销明星
    this.getScreenData(); //首签明星
    this.getTeamList(); //战队排行榜
    this.getRankingList(); //公司排行榜 //签单排行榜
    this.currentTime();

    var contend = document.querySelector(".contend");
    // 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
    window.onresize = () => {
      this.isScreenFull = screenfull.isFullscreen;
      // console.log(this.isScreenFull);
      if (this.isScreenFull == true) {
        contend.style.position = "absolute";
        contend.style.top = "0px";
        contend.style.left = "0px";
      } else {
        contend.style.position = "relative";
      }
    };
  },
  created() {
    // 实现轮询
    this.myInterval = setInterval(() => {
      this.getRankingList(); // 签单、公司 排行榜
      this.getTeamList(); // 战队排行榜
      this.getScreenData(); // 今日数据 首签明星
      this.getCourseStar(); //课程营销明星
    }, 180000);
    this.myInterval2 = setInterval(() => {
      this.getlist(); //折线图  销冠榜、进步榜
    }, 21600000);
  },
  //过滤器
  filters: {
    valueFilter(value) {
      const realVal = value && value.length > 2 ? value.slice(-2) : value;
      return realVal;
    },
    numName(value) {
      var nameValue = value + "";
      return nameValue.slice(0, 6);
    },
  },

  methods: {
    changeMonth(val) {
      let year = val.toString().slice(11, 15);
      this.year = year;

      let month = val.toString();
      if (month.indexOf("Jan") != -1) {
        this.date = "01";
      } else if (month.indexOf("Feb") != -1) {
        this.date = "02";
      } else if (month.indexOf("Mar") != -1) {
        this.date = "03";
      } else if (month.indexOf("Apr") != -1) {
        this.date = "04";
      } else if (month.indexOf("May") != -1) {
        this.date = "05";
      } else if (month.indexOf("Jun") != -1) {
        this.date = "06";
      } else if (month.indexOf("Jul") != -1) {
        this.date = "07";
      } else if (month.indexOf("Aug") != -1) {
        this.date = "08";
      } else if (month.indexOf("Sep") != -1) {
        this.date = "09";
      } else if (month.indexOf("Oct") != -1) {
        this.date = "10";
      } else if (month.indexOf("Nov") != -1) {
        this.date = "11";
      } else if (month.indexOf("Dec") != -1) {
        this.date = "12";
      }
      this.teamList.length = 0;
      this.teamOneList.length = 0;
      this.qiandanList.length = 0;
      // console.log(this.date);
      this.getRankingList(); // 签单、公司 排行榜
      this.getTeamList();
    },
    //数据分析 折线图
    getlist() {
      topThreeAndDiscountAPI()
        .then((res) => {
          if (res.code == 0) {
            this.initLine();
            this.numberone = res.data.numberone[0];
            this.xiaoguanList.first = res.data.xiaoguan[0];
            this.xiaoguanList.second = res.data.xiaoguan[1];
            this.xiaoguanList.third = res.data.xiaoguan[2];

            this.$nextTick(function () {
              this.mySwiper1Init();
            });

            // 销冠榜图片
            if (this.xiaoguanList.first.img) {
              this.getfirstImgdata();
            }
            if (this.xiaoguanList.second.img) {
              this.getsecondImgdata();
            }
            if (this.xiaoguanList.third.img) {
              this.getthirdImgdata();
            }

            // 进步榜图片
            if (this.xiaoguanList.first.img2) {
              this.getfirstImg2data();
            }
            if (this.xiaoguanList.second.img2) {
              this.getsecondImg2data();
            }
            if (this.xiaoguanList.third.img2) {
              this.getthirdImgd2ata();
            }

            const list1 = res.data.zhexian1 || [];
            const list2 = res.data.zhexian2 || [];
            const xList = res.data.X1 || [];
            const monthd1 = res.data.zhexian1[0].monthd;
            const monthd2 = res.data.zhexian2[0].monthd;
            const obj = { monthd1, monthd2 };

            const arr = [];
            for (let i in obj) {
              arr.push(obj[i]); //属性
            }

            const zhexianList1 = [];
            const zhexianList2 = [];

            for (let index = 0; index < list1.length; index++) {
              const element = list1[index];
              zhexianList1.push(element.receivedMoney);
            }
            for (let index = 0; index < list2.length; index++) {
              const element = list2[index];
              zhexianList2.push(element.receivedMoney);
            }
            this.option.xAxis.data = xList;
            this.option.series[0].data = zhexianList1;
            this.option.series[1].data = zhexianList2;
            this.option.series[0].name = monthd1;
            this.option.series[1].name = monthd2;
            this.option.legend.data = arr;

            this.chartObj.setOption(this.option, true);
          }
        })
        .catch((err) => {
          throw err;
        });
    },
    mySwiper1Init() {
      new Swiper(".mySwiper1", {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: 30000,
        observer: true,
        observeParents: true,
      });
    },

    mySwiper2Init() {
      new Swiper(".mySwiper2", {
        direction: "horizontal", // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: 20000,
        observer: true,
        observeParents: true,
      });
    },
    chageQiandan(arr) {
      // const analog_arr = this.analogData(); //新数据
      const analog_arr = arr; //新数据
      let _arr = this.qiandanList;
      const ids = analog_arr.map((key) => key.id); //新数据id
      var that = this;
      let newarr = analog_arr.filter(
        (l2) => _arr.findIndex((l1) => l2.id === l1.id) === -1
      );
      // console.log(newarr)
      _arr.forEach((element, index_old) => {
        if (ids.includes(element.id)) {
          //新数据内包含 计算处在新数据的第几条
          let index_now = ids.indexOf(element.id); //获取到索引
          let obj = analog_arr[index_now];
          // console.log(index_now, "索引索引");
          if (index_now != index_old) {
            obj.style = {
              top: index_now * 0.5 + "rem",
            };
            that.$set(that.qiandanList, index_old, obj);
          } else {
            let obj = analog_arr[index_old];
            obj.style = {
              top: index_old * 0.5 + "rem",
            };
            that.$set(that.qiandanList, index_old, obj);
          }
        } else {
          let item = null;
          try {
            newarr.forEach((element) => {
              const idx = ids.indexOf(element.id);
              item = analog_arr[idx];
              item.style.top = idx * 0.5 + "rem";
              throw Error();
            });
          } catch (e) {}
          newarr = newarr.filter((l2) => l2.id !== item.id);
          that.$set(that.qiandanList, index_old, item);
        }
      });
    },
    // 公司排行榜  签单排行榜
    getRankingList() {
      rankingListAPI({
        year: this.year,
        date: this.date,
      })
        .then((res) => {
          if (res.code == 0) {
            //公司排行榜
            this.rankingList = res.data.gongsi || [];

            //签单排行榜
            if (res.data.qiandan) {
              let arr = res.data.qiandan;
              if (this.qiandanList.length < 1) {
                for (let i = 0; i < arr.length; i++) {
                  arr[i].style = { top: i * 0.5 + "rem" };
                }
              } else {
                for (let i = 0; i < arr.length; i++) {
                  arr[i].style = { top: i * 0.5 + "rem" };
                }
                this.chageQiandan(arr);
                return;
              }
              this.qiandanList = arr || [];
            }
          }
        })
        .catch((err) => {
          throw err;
        });
    },
    //战队排行榜 回款金额
    chageAll(arrTeam) {
      const analog_arr = arrTeam; //新数据
      let _arr = this.teamList;
      const ids = analog_arr.map((key) => key.id); //新数据id
      var that = this;
      let newarr = analog_arr.filter(
        (l2) => _arr.findIndex((l1) => l2.id === l1.id) === -1
      );
      _arr.forEach((element, index_old) => {
        if (ids.includes(element.id)) {
          //新数据内包含 计算处在新数据的第几条
          let index_now = ids.indexOf(element.id); //获取到索引
          let obj = analog_arr[index_now];
          if (index_now != index_old) {
            obj.style = {
              top: index_now * 0.5 + "rem",
            };
            that.$set(that.teamList, index_old, obj);
          } else {
            let obj = analog_arr[index_old];
            obj.style = {
              top: index_old * 0.5 + "rem",
            };
            that.$set(that.teamList, index_old, obj);
          }
        } else {
          let item = null;
          try {
            newarr.forEach((element) => {
              const idx = ids.indexOf(element.id);
              item = analog_arr[idx];
              item.style.top = idx * 0.5 + "rem";
              throw Error();
            });
          } catch (e) {}
          newarr = newarr.filter((l2) => l2.id !== item.id);
          that.$set(that.teamList, index_old, item);
        }
      });
    },
    //战队排行榜 平均回款
    chageOne(arrOne) {
      const analog_arr = arrOne; //新数据
      let _arr = this.teamOneList;
      const ids = analog_arr.map((key) => key.id); //新数据id
      var that = this;
      let newarr = analog_arr.filter(
        (l2) => _arr.findIndex((l1) => l2.id === l1.id) === -1
      );
      _arr.forEach((element, index_old) => {
        if (ids.includes(element.id)) {
          //新数据内包含 计算处在新数据的第几条
          let index_now = ids.indexOf(element.id); //获取到索引
          let obj = analog_arr[index_now];
          if (index_now != index_old) {
            obj.style = {
              top: index_now * 0.5 + "rem",
            };
            that.$set(that.teamOneList, index_old, obj);
          } else {
            let obj = analog_arr[index_old];
            obj.style = {
              top: index_old * 0.5 + "rem",
            };
            that.$set(that.teamOneList, index_old, obj);
          }
        } else {
          let item = null;
          try {
            newarr.forEach((element) => {
              const idx = ids.indexOf(element.id);
              item = analog_arr[idx];
              item.style.top = idx * 0.5 + "rem";
              throw Error();
            });
          } catch (e) {}
          newarr = newarr.filter((l2) => l2.id !== item.id);
          that.$set(that.teamOneList, index_old, item);
        }
      });
    },
    // 战队排行榜
    getTeamList() {
      teamListAPI({
        year: this.year,
        date: this.date,
      })
        .then((res) => {
          if (res.code == 0) {
            // 回款金额
            if (JSON.stringify(res.data) != "{}" || res.data.allmoney) {
              let arrTeam = res.data.allmoney;
              if (this.teamList.length < 1) {
                for (let i = 0; i < arrTeam.length; i++) {
                  arrTeam[i].style = { top: i * 0.5 + "rem" };
                }
              } else {
                this.chageAll(arrTeam);
                return;
              }
              this.teamList = arrTeam || [];
            }

            // 平均回款
            if (JSON.stringify(res.data) != "{}" || res.data.onemoney) {
              let arrOne = res.data.onemoney;
              if (this.teamOneList.length < 1) {
                for (let i = 0; i < arrOne.length; i++) {
                  arrOne[i].style = { top: i * 0.5 + "rem" };
                }
              } else {
                this.chageOne(arrOne);
                return;
              }
              this.teamOneList = arrOne || [];
            }
          }
        })
        .catch((err) => {
          throw err;
        });
    },
    // 销冠榜图片
    getfirstImgdata() {
      let urlImg = this.xiaoguanList.first.img;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.xiaoguanList.firstImg = data;
        });
    },
    getsecondImgdata() {
      let urlImg = this.xiaoguanList.second.img;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.xiaoguanList.secondImg = data;
        });
    },
    getthirdImgdata() {
      let urlImg = this.xiaoguanList.third.img;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.xiaoguanList.thirdImg = data;
        });
    },
    //进步榜图片
    getfirstImg2data() {
      let urlImg = this.xiaoguanList.first.img2;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.xiaoguanList.firstImg2 = data;
        });
    },
    getsecondImg2data() {
      let urlImg = this.xiaoguanList.second.img2;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.xiaoguanList.secondImg2 = data;
        });
    },
    getthirdImg2data() {
      let urlImg = this.xiaoguanList.third.img2;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.xiaoguanList.thirdImg2 = data;
        });
    },

    getQueryMp4() {
      queryMp4().then((res) => {
        if (res.code == 0) {
          if (res.data != null) {
            this.urlVideo = res.data.url;
            this.videoData = "http://crmfile.hanpinedu.com/" + res.data.path;
            // this.getVideodata();
          }
        }
      });
    },
    // getVideodata() {
    //   var url = "/api" + this.urlVideo;
    //   console.log(url)
    //   axios
    //     .get(url, {
    //       responseType: "arraybuffer",
    //     })
    //     .then((response) => {
    //       console.log(response);
    //       return (
    //         "data:video/MP4;base64," +
    //         btoa(
    //           new Uint8Array(response.data).reduce(
    //             (data, byte) => data + String.fromCharCode(byte),
    //             ""
    //           )
    //         )
    //       );
    //     })
    //     .then((data) => {
    //       this.videoData = data;
    //     });
    // },
    // 课程营销明星
    getCourseStar() {
      courseStarAPI()
        .then((res) => {
          if (res.code == 0) {
            this.marketingTeacher1 = res.data[0];
            this.marketingTeacher2 = res.data[1];
            this.marketingTeacher3 = res.data[2];
            // console.log(this.marketingTeacher2.userVO.img);
            if (this.marketingTeacher1 && this.marketingTeacher1.userVO.img) {
              this.getMarketImgdata();
            }
            if (this.marketingTeacher2 && this.marketingTeacher2.userVO.img) {
              this.getMarketImgdata();
            }
            if (this.marketingTeacher3 && this.marketingTeacher3.userVO.img) {
              this.getMarketImgdata();
            }
            this.$nextTick(function () {
              this.mySwiper2Init();
            });
          }
        })
        .catch((err) => {
          throw err;
        });
    },

    getMarketImgdata() {
      let urlImg =
        this.marketingTeacher1.userVO.img ||
        this.marketingTeacher2.userVO.img ||
        this.marketingTeacher3.userVO.img;
      // console.log(urlImg);
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          // console.log(response);
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          // console.log(data);
          this.MarketImgData = data;
          this.$nextTick(function () {
            this.mySwiper2Init();
          });
        });
    },
    getSignImgdata() {
      console.log(this.signBillRanking);
      let urlImg = this.signBillRanking.userVO.img;
      var url = "/api" + urlImg;
      axios
        .get(url, {
          responseType: "arraybuffer",
        })
        .then((response) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(response.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.signBillImgData = data;
        });
    },

    // 首签明星
    getScreenData() {
      todayLargeScreenDataAPI()
        .then((res) => {
          if (res.code == 0) {
            this.receivablesMoney = res.data.todayReceivablesMoney; //回款金额
            this.customerCount = res.data.todayCustomerCount; //学员总数
            this.contractCount = res.data.todayContractCount; //签单总数

            this.signBillRanking = res.data.largeScreenSignBillRanking;

            if (this.signBillRanking && this.signBillRanking.userVO.img) {
              this.getSignImgdata();
            }
          }
        })
        .catch((err) => {
          throw err;
        });
    },

    //鼠标移动进来显示全屏按钮
    showFullScreen() {
      this.isShow = true;
    },
    hidFullScreen() {
      this.isShow = false;
    },
    showRank() {
      this.isShowSwiper = true;
      this.isShowVideo = false;
      this.isCanvas = true;
    },

    showVideo() {
      this.isShowVideo = true;
      this.isShowTop3 = false;
      this.isShowTop3ph = false;
      this.isShowSwiper = false;
      this.isCanvas = false;
    },
    //战队排行榜按钮
    showTAve() {
      this.isShowTMone = false;
      this.getTeamList();
      // console.log(this.teamOneList.length, "11111");
    },
    showTmoe() {
      this.isShowTMone = true;
      this.getTeamList();
      // console.log(this.teamList.length, "00000");
    },

    //全屏
    fullScreen() {
      const bodyEle = document.documentElement;
      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle(bodyEle);
      this.isShow = false;
    },
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${weekArr[week]}`;
      this.nowTime = `${hour}:${minute}:${second}`;
    },
    //   async getTianQi(){
    //   var result = await axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
    //   console.log(result.data.data.forecast)
    //   this.City = result.data.data.forecast[0]
    //   console.log(this.City)
    // }
    tableStyle(row, column) {
      if (row.column.label === "回款金额") {
        return {
          border: "none",
          color: "rgba(255, 234, 0, 1)",
          Backgroud: "transparent",
        };
      } else if (row.column.label === "平均回款") {
        return {
          border: "none",
          color: "rgba(255, 234, 0, 1)",
          Backgroud: "transparent",
        };
      } else {
        return {
          border: "none",
          color: "#fff",
          Backgroud: "transparent",
        };
      }
    },

    Gold() {
      return {
        color: "red",
      };
    },

    initLine() {
      this.chartObj = echarts.init(document.getElementById("lineArea"));
      this.option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
          left: "70",
          top: "0",
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "0",
          right: "6",
          bottom: "0",
          top: "8",
          containLabel: true,
        },
        toolbox: {
          // feature: {
          //     saveAsImage: {}
          // }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0097F8",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} 元",
            textStyle: {
              color: "#fff",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0097F8",
            },
            onZero: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "",
            type: "line",
            stack: "邮件总量",
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#fff",
              },
            },

            data: [],
          },
          {
            name: "",
            type: "line",
            stack: "联盟总量",
            symbol: "circle", //拐点样式为实心圆
            symbolSize: 10, //拐点大小
            lineStyle: {
              color: "#007bbb",
            },
            itemStyle: {
              normal: {
                color: "#007bbb",
              },
            },
            data: [],
          },
        ],
      };

      // chartObj.setOption(option);
    },
  },

  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
    clearInterval(this.myInterval);
    clearInterval(this.myInterval2);
  },
};
// var contend =document.querySelector(".contend");
// document.querySelector(".fullpage").onclick=function(){
//   if(contend.requestFullscreen){
//     contend.requestFullScreen();
//   }else if(contend.webkitRequestFullScreen){
//     contend.webkitRequestFullScreen();
//   }else if(contend.mozRequestFullScreen){
//     contend.mozRequestFullScreen();
//   }
//   else if(contend.msRequestFullScreen){
//     contend.msRequestFullScreen();
//   }else{
//     contend.oRequestFullScreen();
//   }
// }
</script>

<style rel="stylesheet/scss" lang="scss">
/* 引入轮播样式 */
@import "./lunbo/swiper-bundle.min.css";
@import "./BigStyle/BigScreen.less";
@import "./BigStyle/yh.scss";
@import "./BigStyle/yh.css";

#canvas {
  position: absolute;
  left: 0.6125rem !important;
  top: 0.4375rem;
  width: 8.625rem;
  height: 6.225rem;
  // border: 1px solid yellow;
  // left: calc((100% - 500px) / 2);
  // background-color: red !important;
}

// .el-table--enable-row-hover .el-table__body tr:hover > td {
//   background-color: #7ba1ce !important;
// }

.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}
.monthBox .el-input__inner {
  background: transparent !important;
  color: #fff !important;
}
.flexrow {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.jucenter {
  justify-content: center;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
}

.list_li {
  height: 0.5rem;
  line-height: 0.5rem;
  position: absolute;
  transition: all 0.5s;
}

// .list_li span:first-child {
//   width: 0.5rem;
//   text-align: center;
// }

.list_ul {
  position: relative;
  top: 0;
  // width: calc(100% - 1rem);
  height: 100%;
  justify-content: flex-start;
}
.conpanyTop {
  background: url(../../../../static/img/big/bj2.png) no-repeat;
  background-size: cover;
}
.conpanyTop ul li:first-child {
  width: 0.7rem;
}

.conpanyTop ul {
  display: flex;
  align-items: center;
  background: url(../../../../static/img/big/bj2.png) no-repeat;
  background-size: cover;
  height: 0.5rem;
  li {
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .RankName {
    width: 1.2rem;
  }
  .RankTeam {
    width: 1.5rem;
  }
  .RankTeamNum {
    width: 0.886rem;
  }
  .RankSigNum,
  .RankBackMoe {
    width: 1.3rem;
  }
}
.main_content {
  position: relative;
}
.monthBox {
  position: absolute;
  top: -20px;
  left: 30px;
}
.main_content .main_left .conpanyRank {
  width: 6.23rem;
  height: 4.55rem;
  overflow: hidden;
}
.list_ul1 {
  position: relative;
  li {
    background: url(../../../../static/img/big/bj2.png) no-repeat;
    background-position-x: -1rem;
    // &:hover {
    //   color: #000 !important;
    //   background: #7ba1ce;
    // }
    .RankBackMoe {
      color: rgb(255, 234, 0);
    }
  }
}
// .list_ul1 li:hover .RankBackMoe {
//   color: #000 !important;
// }
.seamless-warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.list_li span {
  display: flex;
  justify-content: center;
}

.qiandanTop {
  background: url(../../../../static/img/big/bj2.png) no-repeat;
  background-size: cover;
  ul {
    display: flex;
    align-items: center;
    background: url(../../../../static/img/big/bj2.png) no-repeat;
    background-size: cover;
    height: 0.5rem;
    li {
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
  }
}
.qiandanTop ul li:first-child {
  width: 0.7rem;
}
.list_ul2 li {
  position: absolute;
  top: 0;
}
.qiandan {
  .RankName {
    width: 1rem;
  }
  .RankTeam {
    width: 1.6rem;
  }
  .RankSigNum {
    width: 1.1rem;
  }
  .RankBackMoe {
    width: 1.6rem;
  }
  .list_li {
    .RankName {
      width: 1rem;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.rankTable {
  height: 4rem;
  overflow: hidden;
  overflow-y: auto;
  .RankName {
    width: 1rem;
  }
  .RankTeam {
    width: 1.2rem;
  }
  .RankSigNum {
    width: 1rem;
  }
  .RankBackMoe {
    width: 1.1rem;
  }
  // .list_ul2 li {
  //   position: static;
  // }
}
.list_li {
  line-height: auto !important;
  .RankTeam {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block !important;
    text-align: center;
  }
}
.topImg {
  background: #2362fb !important;
  p {
    width: 100%;
    height: 100%;
    background: #2362fb;
    border-radius: 50%;
    display: flex;
    align-items: 96px;
    align-items: center;
    justify-content: center;
    font-size: 0.35rem;
  }
  .p2 {
    font-size: 0.25rem;
  }
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.todaypic,
.firstImg {
  p {
    background: #2362fb !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}

.firstImg {
  p {
    font-size: 0.35rem;
  }
}
.qiandanFlex {
  display: flex;
}
.qiandanFlex_list {
  width: 0.7rem;
  p {
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../../../../static/img/big/bj2.png) no-repeat;
    background-size: 106% 100%;
  }
}
.firstName {
  text-align: center;
  width: 1rem;
  left: 0.5rem !important;
}
#companyRank {
  .list_ul1 {
    position: static;
  }
  .list_li {
    position: static;
    background-position-x: 0;
  }
  // min-height: 1.55rem !important;
  height: 4rem;
  .list_li span:first-child {
    width: 0.7rem;
  }
}
// .qiandanUl li:nth-child(4){
//   top: 1.5rem;
// }
// .qiandanUl li:nth-child(5){
//   top: 2rem;
// }
.topdate {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block !important;
  text-align: center;
  padding: 0 10px;
}
.contend {
  position: relative;
  z-index: 1999;
}
.headright {
  right: 0.2rem !important;
}
.startDateTable .startDate {
  display: flex !important;
  align-items: center !important;
  width: 3rem !important;
  justify-content: center;
  .classNumP,
  .classNumT,
  .classNum {
    position: static !important;
  }
  .classNumT {
    margin: 0 0.2rem;
  }
}
.app-main {
  position: static !important;
}
.main_content .main_left .courseStar {
  display: flex;
  align-items: center;
}
.mySwiper2 {
  width: 8rem;
}
.list_null {
  text-align: center;
  line-height: 0.5rem;
  width: 246rem;
  background: url()
    no-repeat;
  background-size: cover;
}
.list_null2 {
  width: auto;
}
.main_content .main_middle .topStar .video .firstN {
  width: 3.1rem;
  text-align: center;
  left: 2.8rem;
}
</style>